<template>
	<view class="container">
		<scroll-view scroll-y class="scroll-y">
			<up-radio-group v-model="workerId" placement="column" @change="hanldeChange">
				<view class="pad-32">
					<view v-for="(item, index) in workerList" :key="index" @click="hanldeChange(item.id)">
						<view class="centerY pad-24 bg-white radius16 mar-bottom-24">
							<up-radio :customStyle="{marginBottom: '8px'}" :name="item.id" />
							<view class="centerXY mar-left-10 flex-w betweenX">
								<view class="centerXY flex-w">
									<image class="image" :src="item.avatar" mode="aspectFill"></image>
									<view class="font-30 mar-left-20 flex-w">
										<view class="betweenX">
											<view>
												<text class="color-text mar-right-20">{{item.name}}</text>
												<text class="color-error"
													v-if="item.work_price.order_price">￥{{item.work_price.order_price}}元</text>
											</view>
											<view class="centerXY font-26 range-right">
												<image class="range" src="@/static/image/range.png" mode=""></image>
												<view>距离<text class="color-primary">{{item.dist}}</text>km</view>
											</view>
										</view>

										<view class="mar-top-20 color-warning betweenX centerY">
											<view>
												<view class="centerXY bg-gold" v-if="item.work_price.level == 30">
													<image class="medal" src="/static/image/gold.png" mode=""></image>
													<view class="font-22 mar-left-5">金牌保洁师</view>
												</view>
												<view class="centerXY bg-silver"
													v-else-if="item.work_price.level == 20">
													<image class="medal" src="/static/image/silver.png" mode=""></image>
													<view class="font-22 mar-left-5">银牌保洁师</view>
												</view>
												<view class="centerXY bg-high" v-else-if="item.work_price.level == 10">
													<view class="font-22 mar-left-5">优质保洁师</view>
												</view>
											</view>
											<view @click="hanldeworkerInfo(item.id)"
												class="font-26 color-646464 centerXY">
												<text>介绍</text>
												<up-icon name="arrow-right" color="#646464"></up-icon>
											</view>
										</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</up-radio-group>
			<u-empty v-if="workerList.length == 0" text="附件没有工人" width="80" height="80"
				icon="/static/image/coupon-none.png"></u-empty>
		</scroll-view>
		<view class="betweenX button-bottom centerXY">
			<view v-if="props.isBack" @click="hanldeBack" class="btn">上一步</view>
			<view @click="hanldeNext" class="btn mar-left-20 button-style">下一步</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		pageListNearby,
		addressDetail
	} from '@/api/index.js'

	// 传参
	const emits = defineEmits(['hanldeNext', 'hanldeBack']);
	// 接收参数
	const props = defineProps({
		isBack: {
			type: Boolean,
			default: true
		},
		workerData: {
			type: Object,
			default: () => []
		}
	})

	const workerList = ref(props.workerData)

	// 选中的地址id
	const workerId = ref("");
	// 点击文字选中
	const userInfo = ref({});
	const hanldeChange = (id) => {
		workerId.value = id;
		userInfo.value = props.workerData.find(i => i.id == id);
	}

	// 上一步
	const hanldeBack = () => {
		emits('hanldeBack');
	}

	// 下一步
	const hanldeNext = () => {
		if (workerId.value == '') {
			uni.$u.toast('请先选择工人');
			return
		}

		let data = [{
			worker_id: workerId.value
		}]

		let user = {
			worker_id: workerId.value,
			...userInfo.value
		};
		emits('hanldeNext', data, user);
	}

	// 查看工人详情
	const hanldeworkerInfo = (id) => {
		uni.navigateTo({
			url: '/pages/worker/detail?worker_id=' + id
		})
	}
</script>

<style scoped lang="scss">
	.container {
		height: 70vh;
		overflow-y: scroll;

		.scroll-y {
			height: calc(70vh - 180rpx);
		}

		.buttom {
			border-top: 2rpx solid #f2f2f2;
			margin-top: 24rpx;
		}

		.checkbox-border {
			border: 2rpx solid rgb(200, 201, 204);
			box-sizing: border-box;
			height: 32rpx;
			width: 32rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.image {
			display: block;
			width: 100rpx;
			height: 100rpx;
			max-width: 100rpx;
			border-radius: 50%;
		}

		.button-bottom {
			width: 100%;
			padding: 35rpx 40rpx;
			box-sizing: border-box;
			background: white;
			position: fixed;
			bottom: 0rpx;
			z-index: 2;
		}

		.btn {
			width: 100%;
			height: 100rpx;
			border-radius: 50rpx;
			border: 2rpx solid #C1C1C1;
			line-height: 100rpx;
			text-align: center;
		}

	}

	.range {
		width: 20rpx;
		height: 25rpx;
		margin-right: 10rpx;
	}

	.medal {
		width: 26rpx;
		height: 21rpx;
		display: block;
	}

	.bg-gold {
		background: linear-gradient(90deg, #FEF2E7 0%, #EECBAE 100%);
		border-radius: 25rpx;
		color: #785940;
		padding: 5rpx 15rpx;
	}

	.bg-silver {
		background: linear-gradient(135deg, #ECECEC 0%, #CCCCCC 100%);
		border-radius: 25rpx;
		color: #444444;
		padding: 5rpx 15rpx;
	}

	.bg-high {
		background: rgba(0, 85, 254, 0.1);
		border-radius: 25rpx;
		color: $uni-color-primary;
		padding: 5rpx 15rpx;
	}
	
	.range-right{
		flex-shrink: 0;
	}
</style>